import { ref, onMounted } from "vue";

function useTodos() {
  const todos = ref([]);
  const addTodo = (addTodo) => {
    todos.value.push(addTodo);
  };
 const fetchTodo=  async  () =>{
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/todos?_limit=5"
    );
    const resoult = await response.json();
    todos.value = resoult.map((item) => {
      return {
        id: item.id,
        content: item.title,
        templeted: item.completed,
      };
    });
  }

  onMounted(() => {
    fetchTodo();
  });
  return {
    todos,
    addTodo,
  };
}

export default useTodos;
